<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('后台首页')">
</head>
<!--<script src="webjars/jquery/2.0.0/jquery.min.js"></script>-->
<!--<link rel="stylesheet" href="webjars/bootstrap/3.0.1/css/bootstrap.min.css">-->
<!--<script src="webjars/bootstrap/3.0.1/js/bootstrap.min.js"></script>-->


<body>
<div id="workingArea" class="container-fluid">
    <!--导航栏-->
    <div th:replace="include/admin/adminNavigator::html"></div>

    <!--左侧折叠菜单-->
    <div th:include="include/admin/adminLeftMenu::html"></div>

    <div class="col-md-10">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-md-4 control-label">分类名称：</label>
                <div class="col-md-6">
                    <input name="name" class="form-control" v-model="bean.name"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">该分类描述：</label>
                <div class="col-md-6">
                    <textarea name="description" class="form-control" v-model="bean.description">
                    </textarea>
                </div>
            </div>
            <!--<div class="form-group">-->
                <!--<label class="col-md-4 control-label">宣传图片：</label>-->
                <!--<div class="col-md-6">-->
                    <!--<input type="file" @change="getFile($event)" >-->
                <!--</div>-->
            <!--</div>-->
            <div class="form-group">
                <button class="form-control btn-info" @click="add">增加分类</button>
            </div>
        </form>
    </div>

    <div th:replace="include/admin/adminFoot::html"></div>
</div>
</body>

<script>
    $(function () {


        var data4Vue = {
            uri: "category",
            bean: {id: 0, name: "", description: ""},
            file:""
        };

        var vue = new Vue({
            el: "#workingArea",
            data: data4Vue,
            mounted: function () {

            },
            methods: {
                add: function () {
                    /*bootstrap提交验证*/
                    var validator= $('form').data('bootstrapValidator').validate();
                    if(!validator.isValid()){
                        //没有通过校验
                        return;
                    } else {
                        //通过校验，可进行提交等操作
                    }
                    var formData=new FormData();
                    formData.append("name",this.bean.name);
                    formData.append("description",this.bean.description);
                    formData.append("file",this.file);
                    
                    axios.post(this.uri, formData).then(function (response) {
                        if (response.data.code == 0) {
                            alert("增加成功");
                            vue.bean = {id: 0, name: "", description: ""};
                        }
                        else
                            alert("增加失败")
                    })
                },
                getFile:function (event) {
                    this.file=event.target.files[0];
                    console.log(this.file);
                },
            }
        })
    })
</script>

<!--表单校验-->
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                /*教学分类*/
                name:{
                    validators:{
                        notEmpty:{
                            message:'教学性质名称不能为空'
                        }
                    }
                },

            }
        });
    });
</script>
</html>